<!DOCTYPE HTML>
<html>
<head>
<title>BI Administration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="<%=theme%>/css/style_reset.css" />
<link rel="Stylesheet" type="text/css" href="<%=theme%>/css/style.css" />
<link rel="Stylesheet" type="text/css" href="<%=theme%>/css/form_content.css" />
<link rel="Stylesheet" type="text/css" href="<%=theme%>/css/style_appdesigner.css" />
<link rel="Stylesheet" type="text/css" href="api/css/jquery.contextMenu.css" />
<link rel="stylesheet" type="text/css" href="api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>

<script type="text/JavaScript" src="api/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="api/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/JavaScript" src="<%=theme%>/script/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="api/js/jquery.dynatree.js"></script>
<script type="text/javascript" src="api/js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="api/boi.js"></script>

<style type="text/css">
    .component-group { border: solid 1px silver; border-radius: 10px; padding: 10px;}
</style>

<script type="text/javascript">

BOILib.Util.ucwords = function ucwords(str) {
    return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
};

BOILib.Property = function Property(comp_id, name) {
    this.panel_id = undefined;
    this.comp_id = comp_id;
    this.name = name;
    this.description = "";
    this.value = ""; //can be simple string or array (for multiple values)
    this.display = "TEXTBOX"; //can be textbox, dropdown, checkbox, radio
    this.mode = "S"; //s=single, m=multiple values
    this.options = []; //array of possible values (used for dropdown/radio displays)
    this.getAssignmentRecord = function () {
        var valueString = '';
        if (this.value instanceof Array) {
            for (var i in this.value)
                if (this.value[i])
                    valueString += '|' + this.value[i];
            if (valueString.indexOf('|') > -1)
                valueString = valueString.substr(1);
        }
        else
            valueString = this.value;

        var record = BOIData.data.createRecord({
            APP_ID: [BOI.app_id],
            PANEL_ID: [this.panel_id],
            COMP_ID: [this.comp_id],
            PROP: [this.name],
            VALUE: [valueString]
        });
        return record;
    }
};

BOILib.Component = function Component(comp_id) {
    this.app_id = "";
    this.comp_id = comp_id;
    this.panel_id = "";
    this.title = "";
    this.description = "";
    this.url = ""; //location of component html
    this.order = 0;
    this.properties = {}; //hashset of property objects with all their definitions
    this.element = null; //the iframe element
    this.setProperties = function () {
        //locate the iframe object of this component and set its properties
        if (this.element) {
            var propertyvalues = {}; //simple hashset of key/value pairs to send to the iframe element
            //TODO: build propertyvalues from this.properties object
            this.element.properties = propertyvalues; //direct access to iframe component properties attribute
            this.element.refreshProperties(); //notifies the iframe component of property change
        }
    };
    this.setProperty = function (name, value) {
        //set an individual property value
        this.properties[name].value = value; //update the object
        if (this.element) {
            this.element.properties[name] = value; //direct access to iframe component properties attribute
            this.element.refreshProperties(); //notifies the iframe component of property change
        }
    }
    this.initialize = function () {
        //execute the initialize function of this components iframe code
        if (this.element) this.element.initialize();
    };
    this.getAssignmentRecord = function () {
        var record = BOIData.data.createRecord({
            APP_ID: [BOI.app_id],
            PANEL_ID: [this.panel_id],
            COMP_ID: [this.comp_id],
            DISPLAY_ORDER: [this.order]
        });
        return record;
    }
};

BOILib.Panel = function Panel(layout_element_id, panel_id) {
    this.layout_id = layout_element_id;
    this.panel_id = panel_id; //top,left,center,right,bottom
    this.properties = {
        width: { name: "width", value: "0px", display: "TEXTBOX" },
        height: { name: "height", value: "0px", display: "TEXTBOX" },
        collapsible: { name: "collapsible", value: "", display: "CHECKBOX" },
        resizable: { name: "resizable", value: "", display: "CHECKBOX" },
        disabled: { name: "disabled", value: "", display: "CHECKBOX" }
    }
    this.element = $('#' + layout_element_id + ' #' + panel_id).get(0); //the actual html element representing this panel
    this.components = {}; //hashset of components
    this.assignComponent = function (comp_id, order) {
        if (this.element) {
            //register a copy of the available component
            //Deep copy clone
            this.components[comp_id] = jQuery.extend(true, {}, BOI.Designer.Components[comp_id]);
            var component = this.components[comp_id];

            //deep copy properties
            for (var p in component.properties) {
                component.properties[p] = jQuery.extend(true, {}, BOI.Designer.Components[comp_id].properties[p]);
                component.properties[p].panel_id = this.panel_id;
            }

            component.panel_id = this.panel_id;
            //create the component element
            //component.element = $('<iframe />').get(0);
            //$(component.element).attr('src', component.url);

            //insert the component element into the panel
            component.element = $(component.element.outerHTML).get(0);
            $(this.element).find('ul').append(component.element);

            //TODO: logic for location order
            component.order = $(component.element).index();

            return component;
        }
    }
    this.unassignComponent = function (comp_id) {

        //remove from the panel element
        $(this.components[comp_id].element).remove();

        //remove reference
        delete this.components[comp_id];

    }
    this.getAssignmentRecord = function () {
        var record = BOIData.data.createRecord({
            APP_ID: [BOI.app_id],
            PANEL_ID: [this.panel_id],
            WIDTH: [this.properties.width.value],
            HEIGHT: [this.properties.height.value],
            DISABLE: [this.properties.disabled.value],
            COLLAPSE: [this.properties.collapsible.value],
            RESIZE: [this.properties.resizable.value]
        });
        return record;
    }
};

BOI.Designer = {
    app_id: undefined,
    Layout: {
        element: null,
        panels: { //default set of panels
            TOP: {},
            LEFT: {},
            RIGHT: {},
            BOTTOM: {},
            CENTER: {}
        },
        assignComponent: function (panel_id, comp_id, order) {
            return BOI.Designer.Layout.panels[panel_id].assignComponent(comp_id, order);
        },
        unassignComponent: function (panel_id, comp_id) {
            BOI.Designer.Layout.panels[panel_id].unassignComponent(comp_id);
        }
    },
    Components: {}, //hashset of available components (lookup)
    initialize: function (layout_element_id, app_id) { //prepare the designer layout
        this.app_id = app_id;
        BOI.app_id = app_id;

        //set the layout element
        BOI.Designer.Layout.element = $('#' + layout_element_id).get(0);

        //initialize the layout panels
        BOI.Designer.Layout.panels['TOP'] = new BOILib.Panel(layout_element_id, 'TOP');
        BOI.Designer.Layout.panels['LEFT'] = new BOILib.Panel(layout_element_id, 'LEFT');
        BOI.Designer.Layout.panels['RIGHT'] = new BOILib.Panel(layout_element_id, 'RIGHT');
        BOI.Designer.Layout.panels['BOTTOM'] = new BOILib.Panel(layout_element_id, 'BOTTOM');
        BOI.Designer.Layout.panels['CENTER'] = new BOILib.Panel(layout_element_id, 'CENTER');

        //load designer data
        BOIData.read.getDesigner(app_id, function (data) {

            $('#bi_debug').val(data);
            //traverse xml and populate

            var panels = $(data).find('APP_LAYOUT PANELS PANEL');
            var available_components = $(data).find('AVAILABLE_COMPONENTS COMPONENT');
            var ui_comp_lister = $('#bi_components ul[id="original"]');
            var groups = {};

            //build available components
            available_components.each(function () {
                var comp_xml = $(this);
                var comp_id = comp_xml.find('COMP_ID').first().text();

                BOI.Designer.Components[comp_id] = new BOILib.Component(comp_id);

                var comp = BOI.Designer.Components[comp_id];

                comp.title = comp_xml.find('TITLE').first().text();
                comp.description = comp_xml.find('DESCRIPTION').first().text();
                comp.url = comp_xml.find('URL').first().text();
                comp.group = comp_xml.find('GROUP_NAME').first().text();

                groups[comp.group] = comp.group; //unique entries

                //create component element
                var element = $("<li group='" + comp.group + "' id='" + comp_id + "'>" + BOILib.Util.ucwords(comp.title) + "<p>" + BOILib.Util.ucwords(comp.description) + "</p></li>").get(0);
                comp.element = element;
                ui_comp_lister.append(comp.element);

                //component properties
                var comp_props = comp_xml.find('PROPERTIES PROPERTY');
                comp_props.each(function () {
                    var prop_xml = $(this);
                    var prop_name = prop_xml.find('PROP').first().text();
                    comp.properties[prop_name] = new BOILib.Property(comp.comp_id, prop_name);

                    var property = comp.properties[prop_name];

                    property.description = prop_xml.find('DESCRIPTION').first().text();
                    property.value = prop_xml.find('VALUE').first().text();
                    property.display = prop_xml.find('DISP_TYPE').first().text(); //can be textbox, dropdown, checkbox, radio
                    property.mode = prop_xml.find('TYPE').first().text(); //s=single, m=multiple values

                    var opts_str = prop_xml.find('POS_VALUES').first().text(); //split by |
                    if (opts_str.indexOf('|') > -1) {
                        var opts = opts_str.split('|');
                        for (var op in opts)
                            if (op)
                                property.options.push(opts[op]);
                    }
                });
            });

            for (var g in groups) {
                var div = $('<div class="component-group" id="' + g + '"><h2>' + g + '</h2><ul></ul></div>');
                $('#bi_components').append(div);
                ui_comp_lister.find('li[group="' + g + '"]').each(function () {
                    div.find('ul').append($(this));
                });
            }

            //build the objects
            panels.each(function () {
                var panel_xml = $(this);
                var panel_id = panel_xml.find('PANEL_ID').first().text();
                var panel = BOI.Designer.Layout.panels[panel_id]; //reference to current layout panel

                panel.properties.width.value = panel_xml.find('WIDTH').first().text();
                panel.properties.height.value = panel_xml.find('HEIGHT').first().text();
                panel.properties.collapsible.value = panel_xml.find('COLLAPSE').text();
                panel.properties.resizable.value = panel_xml.find('RESIZE').text();
                panel.properties.disabled.value = panel_xml.find('DISABLE').text();

                //panel assigned components
                var panel_comps = panel_xml.find('ASSIGNED_COMPONENTS COMPONENT');
                panel_comps.each(function () {
                    var comp_xml = $(this);
                    var comp_id = comp_xml.find('COMP_ID').first().text();
                    var comp_order = comp_xml.find('DISPLAY_ORDER').first().text();

                    var comp = panel.assignComponent(comp_id, comp_order);

                    //components property values
                    var comp_props = comp_xml.find('PROPERTIES PROPERTY');
                    comp_props.each(function () {
                        var prop_xml = $(this);
                        var prop_name = prop_xml.find('PROP').first().text();
                        if (comp.properties[prop_name])
                            comp.properties[prop_name].value = prop_xml.find('VALUE').first().text();
                    });
                });
            });

        });
    },
    saveAll: function () {
        //save all 4 panels ZCL_MYBW_COMP_PANEL | UPDATE
        //delete all assigned components in current app ZCL_MYBW_COMP_LOC | DELETE | using parameter APP_ID
        //save panel assigned components ZCL_MYBW_COMP_LOC | UPDATE
        //save assigned component properties ZCL_MYBW_COMP_DEFINITION | UPDATE

        var panel_records = [],
                comp_records = [],
                prop_records = [];
        for (var p in BOI.Designer.Layout.panels) {
            var panel = BOI.Designer.Layout.panels[p];
            panel_records.push(panel.getAssignmentRecord());

            for (var c in panel.components) {
                var comp = panel.components[c];
                comp_records.push(comp.getAssignmentRecord());

                for (var i in comp.properties) {
                    var prop = comp.properties[i];
                    prop_records.push(prop.getAssignmentRecord());
                }
            }
        }

        var panel_req = BOIData.request.prepare("ZCL_MYBW_COMP_PANEL", "UPDATE", panel_records);
        var comp_req_del = BOIData.request.prepare("ZCL_MYBW_COMP_LOC", "DELETE", [BOIData.data.createRecord({ APP_ID: [BOI.app_id] })]);
        var comp_req = BOIData.request.prepare("ZCL_MYBW_COMP_LOC", "UPDATE", comp_records);
        var prop_req = BOIData.request.prepare("ZCL_MYBW_COMP_DEFINITION", "UPDATE", prop_records);

        $('#bi_debug').val(panel_req + comp_req_del + comp_req + prop_req);

        //return;

        //perform the requests
        BOIData.request.perform(panel_req, "text", "POST", function (data) {
            //panels have been saved
            BOIData.request.perform(comp_req_del, "text", "POST", function (data) {
                //component assignments cleared
                BOIData.request.perform(comp_req, "text", "POST", function (data) {
                    //component assignments created
                    BOIData.request.perform(prop_req, "text", "POST", function (data) {
                        //component assignments properties values set created
                     //   alert('All Data Saved Successfully');
                         BOI.BOILib.Util.log('All Data Saved Successfully',true);

                    });

                });

            });
        });
    }
};

BOI.Events = {
    _events: {},
    addListener: function (eventName, callback) {
        var events = this._events,
                callbacks = events[eventName] = events[eventName] || [];
        callbacks.push(callback);
    },
    raiseEvent: function (eventName, args) { //notifies all listeners
        var callbacks = this._events[eventName];
        if (callbacks)
            for (var i = 0, l = callbacks.length; i < l; i++) {
                callbacks[i](args);
            }
    },
    appchange: "appchange",
    repchange: "repchange",
    varchange: "varchange",
    propchange: "propchange"
};

//sample test for raising an event (this should notify listeners)
//BOI.Events.raiseEvent(BOI.Events.appchange, ['NEWAPP']);

$(function () {
    //$(window).bind('load', resize);
    //$(window).bind('resize', resize);


    $('input[type="button"]').button();

    //save
    $(document).on('click', '#bi_btn_save', function () {
        BOI.Designer.saveAll();
    });

    //preview
    $(document).on('click', '#bi_btn_preview', function () {
        window.open("bi_apps_view.html?app_id=" + BOI.app_id, "bi_win_preview");
    });

    //code
    $(document).on('click', '#bi_btn_code', function () {
        $('#bi_source_code').val(generateCode());
        $('#bi_dialog_code').dialog({ width: 600 });
    });

    //render the layout
    BOI.app_id = BOILib.Util.getUrlParam("app_id");
    BOI.Designer.initialize('bi_layout', BOI.app_id);

    //panel menu
    $.contextMenu({ //menu for panel
        zIndex: 10000,
        trigger: "left",
        selector: '.comp-parent',
        callback: function (key, options) {
            var panel_id = $(options.$trigger).find('.comp-panel').attr('id');
            showDialogConfig(panel_id);
        },
        items: {
            "config": { name: "Configure Panel...", icon: "" }
        }
    });

    //available component menu
    $.contextMenu({ //menu for available components
        zIndex: 10000,
        trigger: "left",
        selector: '#bi_components li',
        callback: function (key, options) {
            var panel_id = key;
            var comp_id = $(options.$trigger).attr('id');
            if (BOI.Designer.Layout.panels[panel_id].components[comp_id]) //only one component instance is allowed per panel
                return;
            BOI.Designer.Layout.assignComponent(panel_id, comp_id);
            createMenuAssigned();
            //$('#bi_layout td[id="' + key + '"] ul').append(options.$trigger);
        },
        items: {
            "TOP": { name: "Add to Top Panel", icon: "" },
            "LEFT": { name: "Add to Left Panel", icon: "" },
            "RIGHT": { name: "Add to Right Panel", icon: "" },
            "BOTTOM": { name: "Add to Bottom Panel", icon: "" },
            "CENTER": { name: "Add to Center Panel", icon: "" }

        }
    });

    //assigned component menu
    createMenuAssigned();

    //bind change event handling
    $(document).on('change', '#bi_dialog_config form input, #bi_dialog_config form select, #bi_dialog_config form textarea', function () {
        var panel_id = $(this).parents('form').find('#current_panel_id').val();
        var comp_id = $(this).parents('form').find('#current_comp_id').val();
        var prop_name = $(this).attr('id');
        var prop_value = $(this).val();

        if ($(this).attr('type') == 'checkbox')
            prop_value = $(this).is(':checked') ? 'X' : '';


        if (comp_id != undefined) //update property value
            BOI.Designer.Layout.panels[panel_id].components[comp_id].properties[prop_name].value = prop_value;
        else //update panel property
            BOI.Designer.Layout.panels[panel_id].properties[prop_name].value = prop_value;
    });
});

function createMenuAssigned() {
    $('#bi_layout li').removeAttr('class');

    $.contextMenu({ //menu for assigned components
        zIndex: 10000,
        trigger: "left",
        selector: '#bi_layout li',
        callback: function (key, options) {
            var panel_id = $(options.$trigger).parents('div').attr('id');
            var comp_id = $(options.$trigger).attr('id');
            switch (key) {
                case "delete":
                    BOI.Designer.Layout.unassignComponent(panel_id, comp_id);
                    //$('#bi_components ul').append(options.$trigger);
                    break;
                case "config":
                    showDialogConfig(panel_id, comp_id);
                    break;
                case "up":
                    if ($(options.$trigger).prev().length > 0) {
                        $(options.$trigger).insertBefore($(options.$trigger).prev());
                        BOI.Designer.Layout.panels[panel_id].components[comp_id].order--;
                        var prev_id = $(options.$trigger).prev().attr('id');
                        if (prev_id)
                            BOI.Designer.Layout.panels[panel_id].components[prev_id].order++;
                    }

                    break;
                case "down":
                    if ($(options.$trigger).next().length > 0) {
                        $(options.$trigger).insertAfter($(options.$trigger).next());
                        BOI.Designer.Layout.panels[panel_id].components[comp_id].order++;
                        var next_id = $(options.$trigger).next().attr('id');
                        if (next_id)
                            BOI.Designer.Layout.panels[panel_id].components[next_id].order--;
                    }
                    break;
            }
        },
        items: {
            "config": { name: "Configure...", icon: "BO_WEBI" },
            "up": { name: "Move Up", icon: "" },
            "down": { name: "Move Down", icon: "" },
            "delete": { name: "Remove", icon: "delete" }
        }
    });
}

function showDialogConfig(panel_id, comp_id) {
    drawProperties(panel_id, comp_id);

    var title = "";
    if (comp_id)
        title = panel_id.toUpperCase() + " Panel - " + BOI.Designer.Components[comp_id].title + ' Configuration';
    else
        title = panel_id.toUpperCase() + " Panel Configuration";

    $('#bi_dialog_config').dialog(
            {
                buttons:
                        [
                            { text: "Ok", click: function () { $(this).dialog("close"); } }
                        ],
                height: 500,
                width: 600,
                modal: true,
                resizable: false,
                show: "fast",
                title: title
            }
    );
}
function drawProperties(panel_id, comp_id) {
    var panel, comp, form, properties;
    panel = BOI.Designer.Layout.panels[panel_id];
    if (comp_id == undefined)
        properties = panel.properties;
    else {
        comp = panel.components[comp_id];
        properties = comp.properties;
    }
    form = $('<form/>');
    var ul = $('<ul/>');
    form.append('<input id="current_panel_id" type="hidden" value="' + panel_id + '" readonly="readonly" />');
    if (comp_id != undefined)
        form.append('<input id="current_comp_id" type="hidden" value="' + comp_id + '" readonly="readonly" />');
    form.append(ul);
    for (var p in properties) {
        var prop = properties[p];
        var form_label = '<label for="' + p + '">' + BOILib.Util.ucwords(p) + '</label>';
        var form_item = $('<li>' + form_label + '</li>');
        var form_field = "";
        var form_field_options = "";
        var form_field_tip = p;
        if (prop.description)
            form_field_tip = prop.description;
        else
            prop.description = p;
        form_field_tip = "&nbsp;<a title='" + form_field_tip + "' href='#'>?</a>";
        switch (prop.display.toUpperCase()) {
            default:
                form_field = $('<input style="margin:5px;" id="' + p + '" name="' + p + '" value="' + prop + '" type="text"/>');
                break;
            case "TEXTBOX":
                form_field = $('<input style="margin:5px;" id="' + prop.name + '" name="' + prop.name + '" value="' + prop.value + '" type="text"/>');
                break;
            case "CHECKBOX":
                form_field = $('<input style="margin:5px;" value="X" type="checkbox" id="' + prop.name + '" name="' + prop.name + '" ' + (prop.value == 'X' ? ' checked="checked"' : '') + ' />' + prop.description);
                break;
            case "TEXTAREA":
                form_field = $('<textarea style="margin:5px;" id="' + prop.name + '"  value="' + prop.value + '"></textarea>');
                break;
            case "DROPDOWN":
                form_field = $('<select style="margin:5px;" id="' + prop.name + '" ></select>');
                for (var o in prop.options)
                    form_field.append('<option>' + prop.options[o] + '</option>');
                form_field.val(prop.value);
                break;
        }
        form_item.append(form_field);
        form_item.append(form_field_tip);
        ul.append(form_item);
    }
    $('#bi_dialog_config').html('');
    $('#bi_dialog_config').append(form);
}
var resize = function () {
    $('html,body').height('100%');
    $('#bi_layout iframe').each(function () {
        $(this).height($(this).parent().height());
    });
}
var layoutstring = function () {/*
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>BI Apps Viewer</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/style_appsview.css" />
 <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/ui-layout.css" />

 <script type="text/JavaScript" src="api/js/jquery-1.8.3.js"></scipt>
 <scipt type="text/javascript" src="api/js/jquery-ui-1.10.3.custom.min.js"></scipt>
 <scipt type="text/JavaScript" src="<%=theme%>/script/jquery.layout.min.js"></scipt>
 <scipt type="text/JavaScript" src="<%=theme%>/script/jquery.easing.1.3.js"></scipt>
 <scipt type="text/javascript" src="api/boi.js"></scipt>
 <scipt type='text/JavaScript' src='../zbw_reporting/scripts/framework_include.js'></scipt>
 <scipt type="text/javascript">
 //render the layout
 $(function(){
 BOI.Events.addListener(BOI.Events.repopen, function (args) {
 showHideComponents(args[0]);
 });
 BOI.Events.addListener(BOI.Events.repchange, function (args) {
 showHideComponents(args[0]);
 });
 function showHideComponents(rep_id) {
 var report = BOI.context.reports[rep_id];

 if (report) {
 for (var p in BOI.Designer.Layout.panels) {
 var panel = BOI.Designer.Layout.panels[p];
 for (var c in panel.components) {
 var comp = panel.components[c];
 if (comp.iframe) {
 if (comp.iframe.properties.varname) {
 var vname = comp.iframe.properties.varname;
 if (report.variables[vname]) {
 $(comp.element).show();
 }
 else {
 $(comp.element).hide();
 }
 }

 }
 }
 }
 }
 }

 BOI.Designer.initialize('bi_layout', '[APP_ID]', function () {

 [SCRIPT_CONTENT]

 var sizes = {
 top: parseInt(BOI.Designer.Layout.panels['TOP'].properties.height.value),
 left: parseInt(BOI.Designer.Layout.panels['LEFT'].properties.width.value),
 right: parseInt(BOI.Designer.Layout.panels['RIGHT'].properties.width.value),
 bottom: parseInt(BOI.Designer.Layout.panels['BOTTOM'].properties.height.value)
 }

 $('.bi_wrapper').layout({
 applyDefaultStyles: true,
 resizable: true,
 north__size: sizes.top,
 west__size: sizes.left,
 east__size: sizes.right,
 south__size: sizes.bottom,
 north__maskContents:    true,
 west__maskContents:   true,
 east__maskContents:   true,
 south__maskContents:    true,
 center__maskContents:   true
 });
 $('.bi_wrapper').css({'opacity':'1'},1000);

 }, false);
 });
 </scipt>
 <style>
 .bi_wrapper{height:calc(100% - 35px); overflow:visible;}
 </style>
 </head>
 <body id="bi_layout">
 <div class="apps_viewer">
 <div class="bi_wrapper">
 <div class="ui-layout-center">
 <div id="CENTER">

 </div>
 </div>
 <div class="ui-layout-north">
 <div id="TOP">

 </div>
 </div>
 <div class="ui-layout-south">
 <div id="BOTTOM"></div>
 </div>
 <div class="ui-layout-east">
 <div id="RIGHT"></div>
 </div>
 <div class="ui-layout-west">
 <div id="LEFT">

 </div>
 </div>
 </div>
 <div class="footer">
 <div class="credits-cover">
 <div class="credits"></div>
 </div>
 <div class="copyright">
 <p>Copyright &copy; <span class="year"></span>&nbsp;<a>Saudi Aramco</a>. All Rights Reserved.</p>
 </div>
 <div class="bottom-links">
 <ul>
 <li><a href="#">Help</a></li>
 <li><a href="#">Sharek</a></li>
 <li><a href="#">Business Intelligence</a></li>
 </ul>
 </div>
 <div class="clear"></div>
 </div>
 </div>
 </body>
 </html>
 */}.toString().slice(14, -3);
layoutstring = layoutstring.replace(/scipt/g, 'script');
layoutstring = layoutstring.substr(1);

function generateCode() {
    layoutstring = layoutstring.replace('[APP_ID]', BOI.app_id);
    var output = "";
    //output+= layoutstring;
    for (var p in BOI.Designer.Layout.panels) {
        var panel = BOI.Designer.Layout.panels[p];
        var panelfunc = "\tBOI.Designer.setPanel("
                + "\n\t\t'" + panel.panel_id + "',"
                + "\n\t\t'" + panel.properties.width.value + "',"
                + "\n\t\t'" + panel.properties.height.value + "',"
                + "\n\t\t'" + panel.properties.collapsible.value + "',"
                + "\n\t\t'" + panel.properties.resizable.value + "',"
                + "\n\t\t'" + panel.properties.disabled.value + "'"
                + "\n\t);";

        output += "\t/* " + panel.panel_id + " Panel */\n";
        output += panelfunc + "\n\n";

        for (var c in panel.components) {
            var properties = "";
            var comp = panel.components[c];
            for (var cp in comp.properties) {
                var prop = comp.properties[cp];
                properties += "\n\t\t\t" + cp + ": { name: '" + prop.name + "', value: '" + prop.value + "' },"
            }
            if (properties.indexOf("},") > -1)
                properties = properties.substr(0, properties.length - 1);

            var func = "\tBOI.Designer.addComponent("
                    + "\n\t\t'" + comp.comp_id + "',"
                    + "\n\t\t'" + comp.url + "',"
                    + "\n\t\t'" + panel.panel_id + "',"
                    + "\n\t\t{" + properties
                    + "\n\t\t}"
                    + "\n\t);";
            output += func + "\n\n";
        }
    }
    output = layoutstring.replace('[SCRIPT_CONTENT]', output);
    return output;
}
</script>

</head>
<body>
<div id="bi_dialog_config" style="display: none;">
</div>
<div id="bi_dialog_code" style="display: none;">
    <textarea id="bi_source_code" style="width: 600px; height: 600px;" wrap="off"></textarea>
</div>
<div class="wrapper">
    <div class="header">
        <div class="icon-bi_appdesigner">
        </div>
        <div class="top-nav">
            <ul>
                <li class="view_code"><a id="bi_btn_code" href="#">View Code</a></li>
                <li class="preview"><a id="bi_btn_preview" href="#">Preview</a></li>
                <li class="save_layout"><a id="bi_btn_save" href="#">Save</a></li>
            </ul>
            <div class="welcome">
                <p>Welcome&nbsp; <span>User</span></p>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="container">
        <div class="sidebar-left">
            <div id="bi_components" class="comp-panel">
                <!-- List of Available Components - Draggable -->
                <ul id="original">
                </ul>
            </div>
        </div>
        <div class="main-container" id="bi_layout">
            <div class="comp-parent top-content">
                <div id="TOP" class="comp-panel">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="main-content">
                <div class="comp-parent content-left">
                    <div id="LEFT" class="comp-panel">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="content-center">
                    <div id="CENTER" class="comp-panel">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="comp-parent content-right">
                    <div id="RIGHT" class="comp-panel">
                        <ul>
                            <!-- <li>jaskdk naskk sjvjojvjojvojvjv nknkn</li>
                         <li>jaskdk nasknk sjvjojvjojvojvjv nknkn</li>
                         <li>jaskdk nasknk sjvjojvjojvojvjv nknkn</li>-->
                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="comp-parent bottom-content">
                <div id="BOTTOM" class="comp-panel">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <div class="credits-cover">
            <div class="credits"></div>
        </div>
        <div class="copyright">
            <p>Copyright &copy; <span class="year"></span>&nbsp;<a>Saudi Aramco</a>. All Rights Reserved.</p>
        </div>
        <div class="bottom-links">
            <ul>
                <li><a href="#">Help</a></li>
                <li><a href="#">Sharek</a></li>
                <li><a href="#">Business Intelligence</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>
